<template>
    <div class="innerContainer">
        <common-title>
            <template #expand>
                <el-button type="primary" @click="onEidt()">添加任务</el-button>
            </template>
        </common-title>

        <div class="innerPane">
            <div class="filterArea">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="设备码">
                        <el-input @keyup.enter="search" v-model="searchForm.taskName" placeholder="请输入设备码"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button plain type="primary" @click="search">查询</el-button>
                        <el-button plain @click="onClear">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="tableData" border row-key="id" style="width: 100%;  " row-class-name="fixed-row"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" width="50" label="序号" />
                <el-table-column header-align="center" prop="macCode"   :show-overflow-tooltip="false" label="设备码" width="160" />
                <el-table-column header-align="center" prop="equiName"  :show-overflow-tooltip="false" label="设备名" width="160" />
                <el-table-column header-align="center" prop="portName" label="串口名称" width="120" />
                <el-table-column header-align="center" prop="serialBaud" label="波特率" width="120" />
                <el-table-column header-align="center" prop="dataBits" label="数据位" width="80" />
                <el-table-column header-align="center" prop="stopBits" label="停止位" width="80" />
                <el-table-column header-align="center" prop="serialParity" label="校验位" width="80" />
                <el-table-column header-align="center" prop="timeoutRead" label="读超时" width="100" />
                <el-table-column header-align="center" prop="timeoutWrite" label="写超时" width="100" />

                <el-table-column header-align="center" prop="dataType" label="采集模式" width="120">
                    <template #default="scope">
                      {{ dataTypeArr.find(item => item.value == scope.row.dataType)?.label }}
                    </template>
                </el-table-column>
                <el-table-column header-align="center" prop="writeCmd" label="请求指令" />
                <el-table-column header-align="center" label="是否启用" width="100">
                    <template #default="scope">
                        <el-switch v-if="scope.row.macCode" v-model="scope.row.isUser" :active-value="1" :inactive-value="0"
                            :before-change="() => toggleSwitch(scope.row, 'isUser')" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";

import { onMounted, reactive, ref } from "vue";

import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import { useRouter } from "vue-router";

import { serialPorts,serialSave } from "@/utils/requests";


import { ElMessage, ElMessageBox } from "element-plus";
import { tr } from "element-plus/es/locales.mjs";

const router = useRouter();



const dataTypeArr = ref([
    { label: "请求/响应", value: "tran" },
    { label: "发布模式", value: "pub" },
])
// Dom 挂载之后
onMounted(() => {
    search();
});

// 用户数据
let tableData = ref([]);

// 搜索条件
const searchForm = reactive({
});

const onClear = () => {
};

const toggleSwitch = async (row, field) => {
    try {
        let postData = { ...row };
        postData[field] = postData[field] === 1 ? 0 : 1;
        return await serialSave(postData);

    } catch (e) {
        return false         // 阻止切换，自动回滚
    }
};


const search = () => {
    serialPorts(searchForm).then((res) => {
        tableData.value = res;
    });
};


// 详情查看弹窗
const viewObj = ref();
const onEidt = (row) => {
    let rowData = null;
    if (row) {
        rowData = Object.assign({ _o: "w" }, row)
    }
    viewObj.value.openDialog(rowData);
};



</script>


<style scoped>
.filterArea {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.filterArea .el-select {
    width: 120px;
}

.el-table .el-link {
    margin-right: 10px;
}

.json-box {
    height: 100%;
    /* 或 400px / 60vh 随你 */
    overflow: auto;
    /* 关键：超出出现滚动条 */
}
</style>
